<template>
  <div>
        <h3>猜你喜欢</h3>
        <div class="list1">
            <span v-for="(item,index) in arr" :style="{fontWeight: nowIndex == index?700:400}" @click="handleClick(index),mysort(index)"   :key="index+'-only1'">{{item}}</span>
        </div>
        <div class="list2">
            <span v-for="(item,index) in arr1" :key="index+'-only2'">{{item}}</span>
        </div>
        <div class="card">
            <div class="card1" v-for="(item,index) in information" :key="index+'-only3'">
                <img :src="item.picUrl" >
                <h4>{{item.name}}</h4>
                <span class="score">星 {{item.wmPoiScore}}</span>
                <span class="sell">{{item.monthSalesTip}}</span><br>
                <span class="money">起送￥20 {{item.shippingFeeTip}}</span>
                <span class="time">{{item.deliveryTimeTip}} {{item.distance}} </span><br>
                <div class="red">
                      <span class="reduce" v-for="(item,index) in item.discounts2" :key="index+'-only5'">{{item.info}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import pic1 from '/src/assets/1.png';
import pic2 from '/src/assets/2.png';
import axios from 'axios';
export default {
  data(){
    return {
        
      nowIndex:0,
        arr:["综合排序","距高最近","销量最高","筛选"],
        arr1:["年货节热卖","律贴联盟","满减惯惠","品质联盟"],
        
        information:[
        ],
        handleClick(index){
            this.nowIndex=index;
        },
        mysort(index){
            if( index == 1 ){ //点击了第一个按钮
                this.information.sort((a,b)=>{
                    return a.distance.substring(0,a.distance.length-2) - b.distance.substring(0,b.distance.length-2);
                })
            }
            else if( index == 2 ){ //点击了第三个按钮
                this.information.sort((a,b)=>{
                    return b.monthSalesTip.substring(2,b.monthSalesTip.length) - a.monthSalesTip.substring(2,a.monthSalesTip.length);
                })
            }
        }
    }
    },
    mounted(){
        axios.get('/api/shop/list').then((res)=>{
            this.information=res.data.list;
        })
    }
        
}
</script>

<style lang="scss" scoped>
     .list1{
              display: flex;
              justify-content: space-between;
              text-align: center;
              margin: 15px 0;
          }
           .list1 span{
              width: 25%;
          }
           .list2{
              display: flex;
              justify-content: space-between;
              text-align: center;
          }
           .list2 span{
              background-color: #f5f5f5;
              margin-bottom: 10px;
              text-align: center;
              border-radius: 6px;
              padding: 5px;
          }

           .card .card1{
              height: 140px;
          }
           .card .card1 img{
              height: 100px;
              width: 100px;
              float: left;
              margin:5px;
          }

           .card .card1 .score{
              font-size: 12px;
              color: red;
              display: inline-block;
              margin-top: 10px;
          }
           .card .card1 .sell{
              font-size: 12px;
          }
           .card .card1 .money{
              font-size: 12px;
          }
           .card .card1 .time{
              font-size: 12px;
              float:right;
          }
           .card .card1 .appraise{
              font-size: 12px;
              background-color: rgb(187, 255, 170);
              color: green;
              margin: 5px 2px;
              display: inline-block;
          }
          .card .card1 .red{
            margin-top:10px ;
            height: 22px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
           .card .card1 .red .reduce{
              font-size: 12px;
              border-radius: 5px;
              border: 1px red solid;
              margin: 0 2px;
              color: red;
              padding: 1px;
              
          }
</style>